<template>
  <div>
    <h2>人数统计</h2>
    <div id="charttwo" class="two"></div>
  </div>
</template>
    
    <script setup>
import { inject, onMounted, reactive } from "vue";
import link from "../api/link";
import url from "../api/urls";

let $echarts = inject("echarts");

//生成随机颜色
function randomHexColor() {
  //随机生成十六进制颜色
  var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
  while (hex.length < 6) {
    //while循环判断hex位数，少于6位前面加0凑够6位
    hex = "0" + hex;
  }
  return "#" + hex; //返回‘#'开头16进制颜色
}
onMounted(() => {
  let myChart = $echarts.init(document.getElementById("charttwo"));
  link(url.chartDataFour).then((res) => {
    // console.log(res.data);
    let numkeys = Object.keys(res.data.num);
    let datas = [];
    res.data.day.forEach((item) => {
      datas.push({
        product: item,
      });
    });
    for (const key in res.data.num) {
      for (let i = 0; i < res.data.num[key].length; i++) {
        datas[i][key] = res.data.num[key][i];
      }
    }
    // console.log(datas);

    const option = {
      legend: {},
      tooltip: {},
      dataset: {
        dimensions: ["product", ...numkeys],
        source: datas,
      },
      xAxis: {
        type: "category",
        // data: days,
      },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        {
          type: "bar",
          itemStyle: {
            color: randomHexColor(),
          },
        },
        {
          type: "bar",
          itemStyle: {
            color: randomHexColor(),
          },
        },
        {
          type: "bar",
          itemStyle: {
            color:randomHexColor(),
          },
        },
      ],
    };
    myChart.setOption(option);
  });
});
</script>
    
    <style lang="scss" scoped>
h2 {
  height: 22px;
  color: #fff;
  line-height: 22px;
  text-align: center;
  font-size: 12px;
}
.two {
  height: 300px;
}
</style>